<template>
  <div class="address">
    <div class="name flex-a flex-b">
      <div class="flex-a">
        <img src="https://cxj.szzkba.cn/upload/i/2024/09/18/152025_1.png" alt="">
        <span>{{ addrInfo[0] ? addrInfo[0].userName : '' }}</span>
        <span>{{
          addrInfo[0] ? addrInfo[0].userPhone : '' }}</span>
      </div>
      <Right size="12" />
    </div>
    <div class="addr flex-a flex-b">
      <div class="flex-a">
        <img src="https://cxj.szzkba.cn/upload/i/2024/09/18/152025.png" alt="">
        <span>{{ addrInfo[0] ?
          addrInfo[0].provinceName + addrInfo[0].cityName + addrInfo[0].regionName +
          addrInfo[0].detailAddress : '' }}</span>
      </div>
      <Right size="12" />
    </div>
  </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Right } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getAddressList } from '../../../../api/index'
export default {
  components: {
    Right,
  },
  setup() {
    const state = reactive({
      id: '',
      addrInfo: []
    });
    onMounted(() => {
      const router = useRouter();
      if (router.params.addressId) {
        state.id = router.params.addressId
        getAddressList().then(response => {
          if (response.resultCode == 200) {
            let list = response.data
            state.addrInfo = list.filter(item => item.addressId == router.params.addressId)
          }
        })
      }
    });
    return { ...toRefs(state) };
  }
};
</script>
<style lang="scss">
.address {
  padding: 30rpx 30rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  margin: 20rpx 32rpx 20rpx;

  .name {
    padding-bottom: 10rpx;

    img {
      width: 20rpx;
      height: 20rpx;
      padding: 10rpx;
      border-radius: 50%;
      background: #CEF542;
      margin-right: 15rpx;
    }

    span:first-child {
      color: #212121;
      font-size: 30rpx;
      margin-right: 10rpx;
    }

    span:last-child {
      color: #808080;
      font-size: 30rpx;
    }
  }

  .addr {
    img {
      width: 20rpx;
      height: 20rpx;
      padding: 10rpx;
      border-radius: 50%;
      background: #CEF542;
      margin-right: 15rpx;
    }

    font-size: 30rpx;
    padding-bottom: 20rpx;
  }

  .title {
    padding: 20rpx 30rpx;
    font-size: 30rpx;
  }
}
</style>